<template>
    <div>
        <navigationBar :bgType="4" navigationTitle="服务师端" />
        <!-- <navigationBar :bgType="4" :backType="2" navigationTitle="服务师端" /> -->

        <view
            class="wrap paddingBottom"
            :style="{ '--navigation-height': navigationHeight + 'px' }"
            v-if="dataInfo"
        >
            <image
                class="wrap-bg"
                :src="getImageURL('technician/technician/top_bg.png')"
                mode="widthFix"
            />

            <view class="wrap-info flex align-center just-between">
                <image class="avatar" :src="dataInfo.work_image" />

                <view class="info">
                    <view class="nickname flex align-center">
                        <text class="f-32 limit-num-line">
                            {{ dataInfo.name }}
                        </text>
                        <image
                            :src="
                                getImageURL(
                                    'technician/technician/arrow_white.png'
                                )
                            "
                        />
                    </view>

                    <scroll-view class="authen-bg flex" scroll-x>
                        <view class="authen-item f-26" @click="onAuthen">
                            {{
                                dataInfo.authentication == 0
                                    ? "未认证"
                                    : dataInfo.authentication == 1
                                    ? "已认证"
                                    : "认证中"
                            }}
                        </view>
                        <view class="authen-item f-26" v-if="false">
                            {{ dataInfo.level_name }}
                        </view>
                        <view class="authen-item f-26">
                            {{ dataInfo.is_service == 1 ? "服务中" : "已休息" }}
                        </view>
                    </scroll-view>
                </view>

                <view class="right flex column align-end" v-if="false">
                    <view class="switch-img">
                        <image
                            v-if="dataInfo.is_update == 1"
                            :src="
                                getImageURL(
                                    'technician/technician/address_update_on.png'
                                )
                            "
                        />
                        <image
                            v-else
                            :src="
                                getImageURL(
                                    'technician/technician/address_update_off.png'
                                )
                            "
                        />
                    </view>

                    <view class="name f-20">
                        {{
                            dataInfo.is_update == 1 ? "已开启" : "已关闭"
                        }}自动更新
                    </view>
                </view>
            </view>

            <view class="address-bg flex align-center">
                <image
                    class="img"
                    :src="
                        getImageURL(
                            'technician/technician/address_location.png'
                        )
                    "
                />
                <view class="current f-26"> 当前位置: </view>
                <view class="address f-26 limit-num-line">{{
                    dataInfo.address
                }}</view>
            </view>

            <view class="options-bg flex">
                <block v-for="(item, index) in options_list" :key="index">
                    <view class="options-item" @click="$handle(item)">
                        <view class="flex column align-center just-center">
                            <image class="img" :src="getImageURL(item.file)" />
                            <view class="name f-26">{{ item.title }}</view>
                        </view>
                    </view>
                </block>
            </view>

            <view class="income-bg flex align-center just-between">
                <view
                    class="income-item flex column just-center"
                    @click.stop="onService"
                >
                    <view class="name f-28"> 服务收入 </view>
                    <view class="num">
                        <text class="f-24 symbol">¥</text>
                        <text class="fb-34">{{
                            dataInfo.service_prcie || "0"
                        }}</text>
                    </view>
                    <view class="withdraw-bg f-26" @click.stop="onCash(1)">
                        去提现
                    </view>
                </view>

                <view
                    class="income-item flex column just-center"
                    @click="onCash(2)"
                >
                    <view class="name f-28"> 车费结算 </view>
                    <view class="num">
                        <text class="f-24 symbol">¥</text>
                        <text class="fb-34">{{
                            dataInfo.car_price || "0"
                        }}</text>
                    </view>
                    <view class="withdraw-bg f-26"> 去提现 </view>
                </view>
            </view>

            <view class="wrap-order-bg">
                <view class="order-title fb-28"> 我的订单 </view>

                <view class="order-list flex align-center">
                    <block v-for="(item, index) in order_list" :key="index">
                        <view
                            class="order-item"
                            @click="onOrderList(item, index)"
                        >
                            <view class="flex column align-center just-center">
                                <view class="file">
                                    <image
                                        class="img"
                                        :src="getImageURL(item.file)"
                                    />

                                    <view class="num f-14" v-if="item.num > 0">
                                        {{ item.num }}
                                    </view>
                                </view>
                                <view class="title f-24">
                                    {{ item.title }}
                                </view>
                            </view>
                        </view>
                    </block>
                </view>
            </view>

            <view class="wrap-tool">
                <view class="tool-title fb-28"> 我的工具 </view>

                <view class="tool-list flex">
                    <block v-for="(item, index) in tool_list" :key="index">
                        <view
                            class="tool-item flex column align-center just-center"
                            @click="$handle(item)"
                        >
                            <image class="img" :src="item.file" />
                            <view class="title f-24"> {{ item.title }} </view>
                        </view>
                    </block>
                </view>
            </view>
        </view>
        <view class="mask" v-if="showModal || showWarning"></view>
        <view class="model" v-if="showModal">
            <view class="model-title"> 技师未认证 </view>
            <view class="model-content">
                当前您的技师属于未认证状态，认证过后才可进行正常接单，请联系经销商认证！
            </view>
            <view class="model-btns flex align-center">
                <view class="model-btnN f-28" @click="onCancel">暂不</view>
                <!-- <view class="model-btnY f-28" @click="onAuth">去认证</view> -->
            </view>
        </view>
        <view class="warning" v-if="showWarning">
            <image class="bg" src="/staic/static/technician/joinUs/bg.png" />
            <view class="tips f-28">
                <view class="title"> 该功能是向平台发起报警信息 </view>
                <view class="sub"> 请谨慎使用！非紧急危险情况请勿使用！ </view>
                <view class="btn" @click="onWarning"> 确认使用报警 </view>
            </view>
            <view class="close" @click="showWarning = false">
                <image
                    src="/staic/static/technician/joinUs/close.png"
                    mode="scaleToFill"
                />
            </view>
        </view>
    </div>
</template>

<script>
import { getTechnicianInfo } from "@/API/API/technician.js";
import { editBasicInfo } from "@/API/API/recruit.js";
export default {
    props: {
        userStatus: {
            type: Number,
            default: 0,
        },
    },
    data() {
        return {
            navigationHeight: this.$navigationHeight,

            dataInfo: null,

            showModal: false,

            showWarning: false,

            options_list: [
                {
                    title: "位置更新",
                    file: "technician/technician/address_update.png",
                    handle: () => {
                        uni.chooseLocation({
                            success: (res) => {
                                editBasicInfo({
                                    address: res.address + res.name,
                                    lat: res.latitude,
                                    lng: res.longitude,
                                    type: 2,
                                })
                                    .then((res) => {
                                        uni.showToast({
                                            title: res.msg,
                                            icon: "none",
                                        });
                                    })
                                    .catch((err) => {
                                        uni.showToast({
                                            title: err.msg,
                                            icon: "none",
                                        });
                                    });
                            },
                        });
                    },
                },
                {
                    title: "时间管理",
                    file: "technician/technician/time_manager.png",
                    handle: () => {
                        uni.navigateTo({
                            url:
                                "/subPages/technician/recruit/timeManagement?info=" +
                                JSON.stringify(this.dataInfo),
                        });
                    },
                },
                {
                    title: "一键报警",
                    file: "technician/technician/click_alarm.png",
                    handle: () => {
                        this.showWarning = true;
                    },
                },
            ],
            order_list: [
                {
                    title: "待接单",
                    file: "technician/technician/wait_take.png",
                    num: 0,
                    status: 2,
                },
                {
                    title: "待服务",
                    file: "technician/technician/wait_service.png",
                    num: 0,
                    status: 3,
                },
                {
                    title: "服务中",
                    file: "technician/technician/serving.png",
                    num: 0,
                    status: 4,
                },
                {
                    title: "已完成",
                    file: "technician/technician/order_finish.png",
                    num: 0,
                    status: 7,
                },
                // {
                //     title: "取消/拒单",
                //     file: "technician/technician/order_cancel.png",
                //     num: 0,
                // },
            ],
            tool_list: [
                // {
                //     title: "等级管理",
                //     file: "technician/technician/level_manager.png",
                //     handle: () => {},
                // },
                // {
                //     title: "储值返佣",
                //     file: "technician/technician/czfy.png",
                //     handle: () => {},
                // },
                {
                    title: "分成明细",
                    file: "/static/static/technician/technician/fcmx.png",
                    handle: () => {
                        uni.navigateTo({
                            url: "/subPages/technician/details/breakdownOfDivision",
                        });
                    },
                },
                {
                    title: "车费明细",
                    file: "/static/static/technician/technician/cfmx.png",
                    handle: () => {
                        uni.navigateTo({
                            url: "/subPages/technician/details/fareDivision",
                        });
                    },
                },
                // {
                //     title: "差评申诉",
                //     file: "technician/technician/cpss.png",
                //     handle: () => {},
                // },
                // {
                //     title: "屏蔽用户",
                //     file: "technician/technician/pbyh.png",
                //     handle: () => {},
                // },
                {
                    title: "提现记录",
                    file: "/static/static/technician/technician/txjl.png",
                    handle: () => {
                        uni.navigateTo({
                            url: "/subPages/technician/recruit/cashLog",
                        });
                    },
                },
                {
                    title: "车费提现记录",
                    file: "/h5/static/mine/cftx.png",
                    handle: () => {
                        uni.navigateTo({
                            url: "/subPages/technician/recruit/cashLog?type=1",
                        });
                    },
                },
                {
                    title: "我的动态",
                    file: "/h5/static/mine/jishizhaopin.png",
                    handle: () => {
                        uni.navigateTo({
                            url: "/subPages/technician/recruit/historyDynamic",
                        });
                    },
                },
                {
                    title: "切换用户端",
                    file: "/static/static/technician/technician/qhyhd.png",
                    handle: () => {
                        uni.$off("onTechnicianShow");
                        this.$stoarge.setUserStatus(1);
                        this.$emit("update:userStatus", 1);
                    },
                },
            ],
        };
    },
    mounted() {
        uni.$on("onTechnicianShow", () => {
            this.getData();
        });
        this.getData();
    },
    methods: {
        /**
         * 订单
         */
        onOrderList(item, index) {
            if (index === 4) {
            } else {
                uni.navigateTo({
                    url: `/subPages/technician/technician/orderList?status=${item.status}`,
                });
            }
        },
        /**
         * 网络请求
         */
        getData() {
            uni.$off("onTechnicianShow");

            getTechnicianInfo().then((res) => {
                this.dataInfo = res.data;

                this.order_list[0].num = res.data.waiting_order;
                this.order_list[1].num = res.data.service_order;

                if (this.dataInfo.authentication == 0) {
                    this.showModal = true;
                }
            });
        },
        // 认证
        onAuthen() {
            if (this.dataInfo.authentication == 0) {
                this.showModal = true;
            }
        },
        onAuth() {
            this.showModal = false;
            uni.navigateTo({
                url: "/subPages/technician/recruit/authentication",
            });
        },
        onCancel() {
            this.showModal = false;
            uni.$off("onTechnicianShow");
            this.$stoarge.setUserStatus(1);
            this.$emit("update:userStatus", 1);
        },
        // 服务收入
        onService() {
            uni.navigateTo({
                url: "/subPages/technician/recruit/serviceRevenue",
            });
        },
        onCash(type) {
            uni.navigateTo({
                url: "/subPages/technician/recruit/cash?type=" + type,
            });
        },
        onWarning() {
            // 拨打电话
            uni.makePhoneCall({
                phoneNumber:
                    uni.getStorageSync("___init_data___").ServiceMobile,
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.wrap {
    --bottom-height: 120rpx;
    --limit-num: 1;
    position: relative;
    z-index: 1;
    padding-left: 20rpx;
    padding-right: 20rpx;
    box-sizing: border-box;

    .wrap-info {
        margin-top: 30rpx;
        width: 100%;

        .avatar {
            width: 112rpx;
            height: 112rpx;
            border-radius: 50%;
            overflow: hidden;
        }
        .info {
            margin-left: 20rpx;
            flex: 1;
            overflow: hidden;

            .nickname {
                width: 100%;
                overflow: hidden;
                color: $bg-text-color;

                > image {
                    margin-left: 12rpx;
                    width: 10rpx;
                    height: 16rpx;
                }
            }
            .authen-bg {
                margin-top: 25rpx;
                width: 100%;
                white-space: nowrap;

                .authen-item {
                    display: inline-block;
                    height: 40rpx;
                    line-height: 40rpx;
                    text-align: center;
                    padding: 0 12rpx;
                    border: 2rpx solid $bg-text-color;
                    color: $bg-text-color;
                    border-radius: 20rpx;
                    overflow: hidden;
                    margin-right: 15rpx;

                    &:last-child {
                        margin-right: 0rpx;
                    }
                }
            }
        }
        .right {
            margin-left: 10rpx;
            height: 112rpx;
            overflow: hidden;

            .switch-img {
                width: 84rpx;
                height: 36rpx;

                > image {
                    width: 100%;
                    height: 100%;
                }
            }
            .name {
                margin-top: 15rpx;
                color: white;
            }
        }
    }

    .address-bg {
        margin-top: 28rpx;
        width: 100%;
        height: 80rpx;
        background-color: rgba(255, 255, 255, 0.41);
        border-radius: 20rpx;
        overflow: hidden;
        padding: 0 20rpx;
        box-sizing: border-box;

        .img {
            width: 24rpx;
            height: 24rpx;
        }
        .current {
            margin-left: 6rpx;
            color: white;
        }
        .address {
            margin-left: 10rpx;
            flex: 1;
            overflow: hidden;
            color: white;
        }
    }

    .options-bg {
        margin-top: 30rpx;
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
        .options-item {
            flex: 1;
            overflow: hidden;

            > view {
                width: 100%;
                height: 100%;

                .img {
                    width: 52rpx;
                    height: 52rpx;
                }
                .name {
                    margin-top: 15rpx;
                    color: $bg-text-color;
                }
            }
        }
    }

    .income-bg {
        margin-top: 30rpx;
        width: 100%;
        overflow: hidden;
        flex-wrap: wrap;

        .income-item {
            width: 340rpx;
            height: 132rpx;
            border-radius: 20rpx;
            background-color: white;
            overflow: hidden;
            padding: 0 18rpx;
            box-sizing: border-box;
            position: relative;

            .name {
                color: #666666;
            }
            .num {
                margin-top: 20rpx;
                color: $theme-color;

                .symbol {
                    margin-right: 5rpx;
                }
            }
        }
    }

    .withdraw-bg {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 120rpx;
        height: 50rpx;
        line-height: 50rpx;
        text-align: center;
        background-color: $theme-color;
        color: $bg-text-color;
        border-top-left-radius: 10rpx;
        border-bottom-left-radius: 10rpx;
        overflow: hidden;
    }

    .wrap-order-bg {
        margin-top: 20rpx;
        width: 100%;
        background-color: white;
        border-radius: 20rpx;
        overflow: hidden;
        padding: 30rpx 20rpx;
        box-sizing: border-box;

        .order-title {
            color: $title-color;
        }

        .order-list {
            margin-top: 10rpx;
            width: 100%;
            overflow: hidden;
            white-space: nowrap;

            .order-item {
                padding-top: 20rpx;
                flex: 1;
                display: inline-block;
                overflow: hidden;

                > view {
                    width: 100%;
                    height: 100%;

                    .file {
                        width: 52rpx;
                        height: 52rpx;
                        position: relative;

                        .img {
                            width: 52rpx;
                            height: 52rpx;
                        }

                        .num {
                            position: absolute;
                            right: 0rpx;
                            top: -8rpx;
                            height: 22rpx;
                            line-height: 22rpx;
                            text-align: center;
                            padding: 0 6rpx;
                            color: white;
                            border-radius: 11rpx;
                            overflow: hidden;
                            background-color: #f91600;
                        }
                    }
                    .title {
                        margin-top: 14rpx;
                        color: $title-color;
                    }
                }
            }
        }
    }

    .wrap-tool {
        margin-top: 20rpx;
        width: 100%;
        background-color: white;
        border-radius: 20rpx;
        overflow: hidden;
        padding: 30rpx 20rpx 0rpx;
        box-sizing: border-box;

        .tool-title {
            color: $title-color;
        }

        .tool-list {
            margin-top: 40rpx;
            width: 100%;
            overflow: hidden;
            flex-wrap: wrap;

            .tool-item {
                width: 25%;
                overflow: hidden;
                margin-bottom: 30rpx;

                .img {
                    width: 64rpx;
                    height: 64rpx;
                }

                .title {
                    margin-top: 15rpx;
                    color: $title-color;
                }
            }
        }
    }
}
.model {
    width: 90%;
    background: white;
    margin: 0 auto;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999;
    text-align: center;
    padding: 0 50rpx;
    border-radius: 20rpx;
    box-sizing: border-box;
    &-title {
        font-size: 36rpx;
        color: #333333;
        font-weight: bold;
        padding: 45rpx 0 0 0;
    }
    &-content {
        font-size: 30rpx;
        color: #333333;
        padding: 30rpx 20rpx;
        line-height: 1.4;
        text-align: left;
    }
    &-btns {
        justify-content: space-around;
        padding: 10rpx 0 40rpx 0;
    }
    &-btnN {
        color: #666666;
        background: #ececec;
    }
    &-btnY {
        color: white;
        background: linear-gradient(90deg, #5d64ca 0%, #6f9bdf 100%);
    }
    &-btnN,
    &-btnY {
        width: 200rpx;
        height: 68rpx;
        line-height: 68rpx;
        border-radius: 38rpx;
    }
}

.warning {
    width: 73.5vw;
    height: 40vh;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999;
    text-align: center;
    overflow: hidden;

    .bg {
        width: 100%;
        height: 80%;
        image {
            width: 100%;
            height: 100%;
        }
    }
    .tips {
        width: 100%;
        height: 30%;
        position: absolute;
        top: 40%;
        text-align: center;
        > view {
            line-height: 1.6;
        }
        .btn {
            width: 300rpx;
            position: absolute;
            bottom: 0rpx;
            left: 50%;
            transform: translateX(-50%);
            height: 60rpx;
            line-height: 60rpx;
            background: $theme-color;
            color: white;
            border-radius: 20rpx;
            overflow: hidden;
        }
    }
    .close {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 60rpx;
        height: 60rpx;
        image {
            width: 100%;
            height: 100%;
        }
    }
}

.mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 998;
}
</style>
